<template>
    <div class="login">
        <div class="page-label">
            <div class="rect">重置</div>
            <div class="triangle"></div>
        </div>
        <div class="page-title">
            <div class="title">重置密码</div>
            <div class="vice-title">RESET PASSWORD</div>
        </div>
        <div class="form">
            <div class="form-item">
                <div class="label">邮箱</div>
                <div class="input-wrap">
                    <a-input v-model="account" size="large" />
                </div>
            </div>
            <div class="form-item">
                <div class="label">验证码</div>
                <div class="input-wrap">
                    <a-input class="verifycode" v-model="verifyCode" style="width:220px" size="large" />
                    <a-button type="primary" class="get-btn" style="width:150px" size="large" @click="getCode()" :disabled="buttonText!=='发送邮箱验证码'">{{buttonText}}</a-button>
                </div>
            </div>
            <div class="form-item">
                <div class="label">请输入新密码</div>
                <div class="input-wrap">
                    <a-input-password v-model="password" size="large" />
                </div>
            </div>
            <div class="form-item">
                <div class="label">请再次输入新密码</div>
                <div class="input-wrap">
                    <a-input-password v-model="repassword" size="large" />
                </div>
            </div>
            <div class="form-item btns">
                <a-button type="primary" ghost class="cancel-btn" @click="login">取消</a-button>
                <a-button type="primary" class="login-btn" @click="register">确定</a-button>
            </div>
        </div>
        
    </div>
</template>

<script>
import {getCookie, isEmail, messageTips, setCookie} from '../../until/tools';
var timer;
var seconds;
export default {
    name:'Register',
    data() {
        return {
            buttonText:'发送邮箱验证码',
            account:'',
            verifyCode:'',
            password:'',
            repassword:''
        }
    },
    methods:{
        getCode() {
            if(this.account==='') {
                messageTips('请输入邮箱账号',2);
                return false;
            }
            if(!isEmail(this.account)) {
                messageTips('邮箱格式不正确',2);
                return false;
            }
            let params = {
                account:this.account
            }
            this.$http.getSign(params).then(res=>{
                if(res&&res.sign) {
                    this.$http.sendCode({sign:res.sign,...params}).then(res=>{
                        this.setCountDown(59);
                        console.log(res)
                    });
                }
            });            
        },

        setCountDown(num) {
            seconds = num;
            this.buttonText = num+'s';
            timer = setInterval(()=>{
                seconds-=1;
                this.buttonText = seconds+'s';
                if(seconds<0) {
                    clearInterval(timer);
                    this.buttonText = '发送邮箱验证码';
                }
            },1000);
        },
        register() {
            if(this.account==='') {
                messageTips('请输入邮箱账号',2);
                return false;
            }
            if(!isEmail(this.account)) {
                messageTips('邮箱格式不正确',2);
                return false;
            }
            if(this.verifyCode==='') {
                messageTips('请输入验证码',2);
                return false;
            }
            if(this.password==='') {
                messageTips('请输入密码',2);
                return false;
            }
            if(this.repassword==='') {
                messageTips('请确认密码',2);
                return false;
            }
            if(this.repassword!==this.password) {
                messageTips('两次密码不一致',2);
                return false;
            }            
            let params = {
                email:this.account,
                verifyCode:this.verifyCode,
                password:this.password
            }
            this.$http.resetPwd(params).then(res=>{
                if(res) {
                    if(res.success) {
                        messageTips(res.message,3);
                        this.$router.push('/login');
                    } else {                        
                        messageTips(res.message,1);
                    }
                }
            })
        },
        login() {
            this.$router.push('/login');
        }
    },
    mounted() {

        let cookieSeconds = getCookie('seconds');
        if(cookieSeconds) {
            let num = parseInt(cookieSeconds);
            this.setCountDown(num);
        }

        window.onbeforeunload=()=>{
            if(seconds>0) {
                setCookie('seconds',seconds,{time:seconds},true);
            }
        }
    },
    beforeDestroy() {
        if(timer) {
            clearInterval(timer);
        }
    }
}
</script>

<style lang="scss" scoped>
@import '../../scss/login.scss';
</style>